<template>
	<view class="page">
		<view class="card">
			<view class="row"><text class="label">客户名称</text><text class="val">{{info.customerName}}</text></view>
			<view class="row"><text class="label">手机号</text><text class="val">{{info.phoneNumber}}</text></view>
			<!-- <view class="row"><text class="label">地址</text><text class="val">{{info.address || '暂无'}}</text></view> -->
			<view class="row"><text class="label">会员余额</text><text class="val">¥{{info.memberBalance}}</text></view>
		</view>
		<view class="detail-btn" @click="showBalance()">余额明细</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {fetchCustomerDetail} from '../../../api/customer.js'

	const info = ref({})
	const cid = ref()
	const customerList = ref([])
	const showBalance = () =>{
		 uni.navigateTo({ url: `/pages/customerManage/customerDetail/detailDetail/detailDetail?id=${cid.value}` })
	}
	const fethDetail =async ()=>{
		const res = await fetchCustomerDetail({
			customerId:cid.value
		})
		info.value = res.data
		
	}
	
	
	onLoad((query) => {
		// 根据 ID 查数据
		// console.log(query.id);
		// customerList.value= customerMock
		cid.value = query.id
		fethDetail()
		// console.log(320,customerList.value)
		// info.value = customerList.value.find(item => item.id == query.id) || {}
		// console.log(321,info.value)
		
	})
</script>

<style>
	.page {
		background: #f6f7f9;
		min-height: 100vh;
	}



	.card {
		margin: 20rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.row {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f2f2f2;
	}

	.label {
		font-size: 30rpx;
		color: #666;
		width:150rpx;
	}

	.val {
		font-size: 30rpx;
		color: #333;
	}

	.detail-btn {
		margin: 40rpx auto;
		width: 700rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #007aff;
		color: #fff;
		border-radius: 44rpx;
	}
</style>